<!DOCTYPE html>
<html>
<head>
    <title>时间域管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../../resources/lib/bui/css/dpl-min.css" rel="stylesheet" type="text/css" />
    <link href="../../resources/lib/bui/css/bui-min.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div style="padding: 10px;">
    <div class="row">
        <div class="span16">
            <div id="grid">
            </div>
        </div>
    </div>
    <script src="../../resources/lib/bui/js/jquery-1.8.1.min.js"></script>
    <script src="../../resources/lib/bui/js/bui-min.js"></script>
    <!-- script start-->
    <script type="text/javascript">
        BUI.use(['bui/grid','bui/data'],function(Grid,Data){
            var Grid = Grid,
                    Store = Data.Store,
                    enumObj1 = {"1" : "男","2" : "女"},
                    enumObj = {"1" : "研发部","2" : "商务部","3":"工程部"},
                    enumObj2 = {"1" : "超级管理员","2" : "系统管理员","3":"制卡专员"},
                    columns = [
                        {title : '账号',dataIndex :'a',width:150,editor : {xtype : 'text'}}, //editor中的定义等用于 BUI.Form.Field.Text的定义
                        {title : '姓名',dataIndex :'b',width:150,editor : {xtype : 'text'}},
                        {title : '性别',dataIndex : 'c', editor : {xtype :'select',items : enumObj1},renderer : Grid.Format.enumRenderer(enumObj1)},
                        {title : '年龄',dataIndex :'d',width:100,editor : {xtype : 'text'}},
                        {title : '所属部门',dataIndex : 'e', width:150,editor : {xtype :'select',items : enumObj},renderer : Grid.Format.enumRenderer(enumObj)},
                        {title : '用户角色',dataIndex : 'f', editor : {xtype :'select',items : enumObj2},renderer : Grid.Format.enumRenderer(enumObj2)},
                        {title : '备注',dataIndex : 'g', editor : {xtype : 'text'}},
                        {title : '操作',dataIndex:'h',renderer : function(){
                            return '<span class="grid-command btn-edit">编辑</span>'
                        }}
                    ],
                    data = [{a:'admin',b:'张三',c:"1",d:"24",e:'3',f:'1',g:'无',h:'3'},
                        {a:'system',b:'李四',c:"2",d:"26",e:'1',f:'3',g:'无',h:'2'},
                        {a:'Admintor',b:'王五',c:"2",d:"26",e:'2',f:'2',g:'无',h:'1'},
                        {a:'kaka',b:'赵六',c:"2",d:"55",e:'3',f:'1',g:'无',h:'1'},
                        {a:'nyk',b:'莫扎特',c:"1",d:"65",e:'2',f:'2',g:'无',h:'1'}];

            var editing = new Grid.Plugins.RowEditing({
                        triggerCls : 'btn-edit',
                        triggerSelected : false
                    }),
                    store = new Store({
                        data : data,
                        autoLoad:true
                    }),
                    grid = new Grid.Grid({
                        render:'#grid',
                        columns : columns,
                        width : 800,
                        forceFit : true,
                        tbar:{ //添加、删除
                            items : [{
                                btnCls : 'button button-small',
                                text : '<i class="icon-plus"></i>添加',
                                listeners : {
                                    'click' : addFunction
                                }
                            },
                                {
                                    btnCls : 'button button-small',
                                    text : '<i class="icon-remove"></i>删除',
                                    listeners : {
                                        'click' : delFunction
                                    }
                                }]
                        },
                        plugins : [editing,Grid.Plugins.CheckSelection],
                        store : store
                    });

            grid.render();

//添加记录
            function addFunction(){
                var newData = {b : 0};
                store.addAt(newData,0);
                editing.edit(newData,'a'); //添加记录后，直接编辑
            }
//删除选中的记录
            function delFunction(){
                var selections = grid.getSelection();
                store.remove(selections);
            }
        });
    </script>
    <!-- script end -->
</div>
</body>
</html>